<template>
	<div class="content">
		<van-row>
			<van-col span="8">
				<van-image round width="4rem" height="4rem" :src="userStore.avator" />
			</van-col>
			<van-col span="16">
				<div class="member-detail">
					<p class="nickname">{{userStore.username}}</p>
					<p class="info">{{userStore.intro}}</p>
				</div>
			</van-col>
		</van-row>
		<van-cell-group title="我的订单">
			<van-grid clickable>
				<van-grid-item icon="photo-o" text="全部" />
				<van-grid-item v-if="badge_numbers.wait_pay" icon="photo-o" text="待付款" :badge="badge_numbers.wait_pay"
					to="/test" />
				<van-grid-item v-else icon="photo-o" text="待付款" to="/test" />
				<van-grid-item v-if="badge_numbers.wait_send" icon="photo-o" text="待发货" :badge="badge_numbers.wait_send"
					to="/test" />
				<van-grid-item v-else icon="photo-o" text="待发货" to="/test" />
				<van-grid-item v-if="badge_numbers.wait_receive" icon="photo-o" text="待收货"
					:badge="badge_numbers.wait_receive" to="/test" />
				<van-grid-item v-else icon="photo-o" text="待收货" to="/test" />
			</van-grid>
		</van-cell-group>
		<van-cell-group title="基本资料">
			<van-cell title="个人资料" is-link to="/uc/profile"></van-cell>
			<van-cell title="收货地址" is-link to="/uc/address"></van-cell>
			<van-cell title="关于" is-link to="/demo"></van-cell>
		</van-cell-group>
	</div>
</template>

<script setup>
	import {
		reactive,
		onMounted
	} from 'vue';
	// 取出之前保存的用户名 
	import {
		useUsersStore
	} from '@/store/user'
	import {
		getUserinfo
	} from '../../api/user';

	const userStore = useUsersStore();
	const badge_numbers = reactive({
		"wait_pay": 0,
		"wait_send": 4,
		"wait_receive": 5
	})

	//页面
	onMounted(() => {
		//1.定义调用API接口的函数 src/api/user.js
		//2.调用上面定义好的函数
		getUserinfo(userStore.username)
			.then((res) => {
				console.log(res)
				if (res.code == 0) {
					console.log("利用Toast输出信息")
					userStore.setUsername(res.data.username)
					userStore.setAvator(res.data.avator)
					userStore.setIntro(res.data.intro)
				} else {
					console.log("利用Toast输出message信息", res.message)
				}

			})
			.catch((err) => {
				console.log("利用轻提示输出err信息", err)
			})
	})
	
	
	//声明父组件支持的自定义事件
	 const $emit = defineEmits(["change"])
	 
	 //触发父组件的自定义事件
	 onMounted(()=>{
		 $emit("change",3)
	 })
	
</script>

<style>
	.content {
		background-color: #f7f8fa;
		height: 500px;
		padding: 15px 10px;
	}

	.member-detail {
		font-size: 14px;
	}
</style>
